<template>
  <div class="table">

    <div class="container">
      <div class="handle-box el-table_p">
        <el-row :gutter="20" class="mgb20">
          <el-col :span="6">
            <el-card>
              <div class="grid-content">
                <div class="grid-cont-center">
                  <div class="grid-num">￥{{allAmount}}</div>
                  <div>待收总金额</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="grid-content">
                <div class="grid-cont-center">
                  <div class="grid-num">￥{{delayAmount}}</div>
                  <div>逾期总金额</div>
                </div>
              </div>
            </el-card>
          </el-col>

        </el-row>

        <div class="selectBox">
          <div>
            <div> 关键字：</div>
            <div class="block">
              <el-input v-model="select_word" placeholder="输入关键字（姓名/用户名）" class="handle-input"></el-input>
            </div>
          </div>
          <div>
            <div> 选择状态：</div>
            <div class="block">
              <el-select v-model="selectValue" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div>
            <div> 选择方案：</div>
            <div class="block">
              <el-select v-model="planValue" placeholder="请选择">
                <el-option v-if="planOptions.length>1"
                  v-for="item in planOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div>
            <div> 选择时间段：</div>
            <div class="block">
              <el-date-picker
                v-model="timeFrame"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
          <div>
            <div></div>
            <div class="block">
              <el-button type="primary" @click="selectBtn">查询</el-button>
            </div>
          </div>
          <!--导出-->
          <!--<el-col :span="3">-->
          <!--<download-excel-->
          <!--class="export-excel-wrapper"-->
          <!--:data="orderList"-->
          <!--:fields="json_fields"-->
          <!--name="订单.xls"-->
          <!--&gt;-->
          <!--<el-button type="primary">导出Excel</el-button>-->
          <!--</download-excel>-->
          <!--</el-col>-->
        </div>

        <!--导出Excel-->


      </div>
    </div>
    <el-table class="el-table_p" size="mini" ref="multipleTable" border :data="orderList">
      <!--<el-table-column type="selection" ></el-table-column>-->
      <el-table-column prop="userAccount" label="个人信息" align="">
        <template #default="scope">
          <div>
            学生姓名：{{ scope.row.nickName}}
          </div>
          <div>
            用户名：{{ scope.row.userAccount}}
          </div>
          <div>
            学员电话：{{ scope.row.phone}}
          </div>
          <div>
            学员微信：{{ scope.row.wx}}
          </div>
          <div>
            学员QQ：{{ scope.row.qq}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="课程信息" align="">
        <template #default="scope">
          <div>
            课程名称：{{ scope.row.name}}
          </div>
          <div>
            课程时长：{{ scope.row.term}}
          </div>
          <div>
            开课时间：{{ scope.row.startDate}}
          </div>
          <!--<div>-->
            <!--创建时间：{{ scope.row.createTime}}-->
          <!--</div>-->
          <!--<div>-->
            <!--审核通过时间：{{ scope.row.auditTime}}-->
          <!--</div>-->
          <div>
            是否监护人办理：{{ scope.row.parentOperate}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="办理信息" align="">
        <template #default="scope">
          <div>
            申请分期金额：￥{{ scope.row.amount}}
          </div>
          <div>
            分期手续费：￥{{ scope.row.serviceFee}}
          </div>
          <div>
            支付方式：{{ scope.row.stageOne+"+"+scope.row.stageTwo+"A"}}
          </div>
          <!--<div>-->
            <!--一次支付折扣：￥{{ scope.row.maxCoupon}}-->
          <!--</div>-->
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.status==0">
            {{"待审核"}}
            <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">待审核</el-button>-->
          </template>
          <template v-if="scope.row.status==1">
            {{"审核通过"}}
            <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">审核通过</el-button>-->
          </template>
          <template v-if="scope.row.status==2">
            {{"已关闭"}}
            <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">已关闭</el-button>-->
          </template>
          <!--订单状态：0:待审核,1:审核通过,2:已关闭-->
        </template>
      </el-table-column>
      <!--<el-table-column prop="updateBy" label="修改人" align="center">-->
      <!--</el-table-column>-->
      <el-table-column prop="createTime" label="创建时间" align="center">
      </el-table-column>
      <!-- <el-table-column label="操作" align="center" v-if="level==1"> -->
      <el-table-column label="操作" align="center" >
        <template slot-scope="scope">
          <el-button size="mini" class="template_btn" type="primary" @click="getAuditDate(scope.row)">编辑</el-button>
          <el-button size="mini" class="template_btn" type="primary" @click="orderDetail(scope.row)">详情</el-button>
          <el-button size="mini" class="template_btn" type="danger" @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog title="删除订单" :visible.sync="delVisible" width="80%" center>
      <div align="center">删除不可恢复，是否确定删除？</div>
      <el-table class="el-table_p" size="mini" ref="multipleTable" border :data="delOrderArr">
        <!--<el-table-column type="selection" ></el-table-column>-->
        <el-table-column prop="userAccount" label="个人信息" align="">
          <template #default="scope">
            <div>
              用户名：{{ scope.row.nickName}}
            </div>
            <div>
              学员姓名：{{ scope.row.userAccount}}
            </div>
            <div>
              学员电话：{{ scope.row.phone}}
            </div>
            <div>
              学员微信：{{ scope.row.wx}}
            </div>
            <div>
              学员QQ：{{ scope.row.qq}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="课程信息" align="">
          <template #default="scope">
            <div>
              课程名称：{{ scope.row.name}}
            </div>
            <div>
              课程时长：{{ scope.row.term}}
            </div>
            <div>
              开课时间：{{ scope.row.startDate}}
            </div>
            <div>
              是否监护人办理：{{ scope.row.parentOperate}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="办理信息" align="">
          <template #default="scope">
            <div>
              申请分期金额：￥{{ scope.row.amount}}
            </div>
            <div>
              分期手续费：￥{{ scope.row.serviceFee}}
            </div>
            <div>
              支付方式：{{ scope.row.stageOne+"+"+scope.row.stageTwo+"A"}}
            </div>
            <!--<div>-->
              <!--一次支付折扣：￥{{ scope.row.maxCoupon}}-->
            <!--</div>-->
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.status==0">
              {{"待审核"}}
              <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">待审核</el-button>-->
            </template>
            <template v-if="scope.row.status==1">
              {{"审核通过"}}
              <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">审核通过</el-button>-->
            </template>
            <template v-if="scope.row.status==2">
              {{"已关闭"}}
              <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">已关闭</el-button>-->
            </template>
            <!--订单状态：0:待审核,1:审核通过,2:已关闭-->
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间" align="">
        </el-table-column>
      </el-table>

      <span slot="footer">
                <el-button size="mini" @click="delVisible = false">取消</el-button>
                <el-button size="mini" @click="deleteRow" type="primary">确定</el-button>
            </span>
    </el-dialog>

    <el-dialog title="更新订单" :visible.sync="centerDialogVisible" width="50%" center>
      <div align="center" style="margin-bottom: 20px;color: red">请核对更改信息</div>
      <el-table class="el-table_p" size="mini" ref="multipleTable" border :data="update_orderList">
        <!--<el-table-column type="selection" ></el-table-column>-->
        <el-table-column prop="userAccount" label="个人信息" align="">
          <template #default="scope">
            <div>
              用户名：{{ scope.row.nickName}}
            </div>
            <div>
              学员姓名：{{ scope.row.userAccount}}
            </div>
            <div>
              学员电话：{{ scope.row.phone}}
            </div>
            <div>
              学员微信：{{ scope.row.wx}}
            </div>
            <div>
              学员QQ：{{ scope.row.qq}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="课程信息" align="">
          <template #default="scope">
            <div>
              课程名称：{{ scope.row.name}}
            </div>
            <div>
              课程时长：{{ scope.row.term}}
            </div>
            <div>
              开课时间：{{ scope.row.startDate}}
            </div>
            <div>
              是否监护人办理：{{ scope.row.parentOperate}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="办理信息" align="">
          <template #default="scope">
            <div>
              申请分期金额：￥{{ scope.row.amount}}
            </div>
            <div>
              分期手续费：￥{{ scope.row.serviceFee}}
            </div>
            <div>
              支付方式：{{ scope.row.stageOne+"+"+scope.row.stageTwo+"A"}}
            </div>
            <div>
              一次支付折扣：￥{{ scope.row.maxCoupon}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.status==0">
              {{"待审核"}}
              <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">待审核</el-button>-->
            </template>
            <template v-if="scope.row.status==1">
              {{"审核通过"}}
              <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">审核通过</el-button>-->
            </template>
            <template v-if="scope.row.status==2">
              {{"已关闭"}}
              <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">已关闭</el-button>-->
            </template>
            <!--订单状态：0:待审核,1:审核通过,2:已关闭-->
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间" align="">
        </el-table-column>
      </el-table>

      <el-form :model="registerForm" ref="registerForm" label-width="100px">
        <el-form-item label="状态" size="mini">
          <input type="radio" name="status" value="0" v-model="registerForm.status">&nbsp;待审核&nbsp;&nbsp;
          <input type="radio" name="status" value="1" v-model="registerForm.status">&nbsp;审核通过
          <!--<input type="radio" name="status" value="2" v-model="registerForm.status">&nbsp;已关闭-->
        </el-form-item>
        <el-form-item prop="amount" label="课程金额（元）" size="mini">
          <el-input v-model="registerForm.amount" style="width: 300px" placeholder="课程金额（元）"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
                <el-button size="mini" @click="goBack(1)">取消</el-button>
                <el-button size="mini" @click="updateAudit" type="primary">确定</el-button>
            </span>
    </el-dialog>
    <!--<el-dialog title="详情" :visible.sync="detailVisible" width="80%" center>-->
    <!--<order-stage :id="id"></order-stage>-->
    <!--</el-dialog>-->

  </div>
</template>
<script>
  import {getAllOrder, delOrder, updateAuditById, getPlanList,getAllAmount} from '../../api/public/api';
  import {mixin} from '../../../static/js/index';
  import {getNowFormatDate} from '../../units/time'


  export default {
    mixins: [mixin],
    // components:{
    //   orderStage
    // },
    data() {
      return {
        current:1,
        size:10,
        pages:1,
        total:0,
        level: 1,
        orderList: [],
        id: "",
        delVisible: false,
        detailVisible: false,//删除弹窗是否显示
        json_fields: {
          "订单": 'odcoursename',//表格内容

        },
        allAmount: 0,       //
        delayAmount: 0,           //
        registerForm: {
          "userAccount": "",
          "term": 0,
          "amount": 0,
          "parentOperate": "",
          "status": 0
        },
        id: 0,
        centerDialogVisible: false, //审核弹窗是否显示
        disabled: true,
        select_word: "",
        options: [
          {
            value: -1,
            label: '全部'
          },
          {
            value: 0,
            label: '待审核'
          },
          {
            value: 1,
            label: '审核通过'
          },
          {
            value: 2,
            label: '已关闭'
          }],
        selectValue: -1,
        timeFrame: "",//时段
        update_orderList: [],
        planOptions: [
          {
            value: -1,
            label: '全部'
          }],
        planValue: -1,
        delOrderArr:[]
      }
    },

    created() {
      let data = {
        current:this.current,
        size:this.size
      }
      this.getData(data);
      this.level = localStorage.getItem('level')
    },
    mounted(){
      this.getPlan()
      this.getAllAmount()
    },
    methods: {
      handleSizeChange(val) {
        this.size = val;
        this.updateData()
      }
      ,
      // 第几页
      handleCurrentChange(val) {
        this.current = val;
        this.updateData()
      },
      //查询待收总金额，逾期总金额
      getAllAmount(){
        let data={}
        getAllAmount(data).then(res=>{
          if (res.data.code == 0) {
            this.allAmount=res.data.data.amount
            this.delayAmount=res.data.data.delayAmount
          }
          console.log("查询待收总金额，逾期总金额",res)
        })
  },
      //查询
      selectBtn() {
        let data = {
          current:1,
          size:this.size
        }
        if (this.select_word) {
          data.userAccount = this.select_word
        }
        if (this.selectValue != -1) {
          data.status = this.selectValue.toString()
        }
        if (this.planValue != -1) {
          data.planId = this.planValue.toString()
        }
        if (this.timeFrame) {
          data.createTime = this.timeFrame[0]
          data.queryEndTime = this.timeFrame[1]
        }
        this.getData(data);
      },
      //数据更新
      updateData() {
        this.select_word=""
        this.planValue=-1
        this.timeFrame=[]
        let data = {
          current:this.current,
          size:this.size
        }
        this.getData(data);
        this.getAllAmount()
      },
      //查询方案
      getPlan() {
        let data = {}
        getPlanList(data).then(res => {
          if (res.data.code == 0) {
            let result = res.data.data.records
            for (let i in result) {
              let obj = {}
              obj['value'] = result[i].id
              obj['label'] = result[i].planName
              this.planOptions.push(obj)
            }
          }
        })
      },
      //查询所有订单
      getData(data) {
        getAllOrder(data).then(res => {
          console.log(res)
          if(res.data.code != 0){
            this.notify(res.data.msg, "error");
          }
          if (res.data.code == 0) {
            this.pages=res.data.data.pages
            this.total=res.data.data.total
            res.data.data.records.map(item => {
              if (item.createTime) {
                item.createTime = getNowFormatDate(item.createTime)
              }
              if (item.auditTime) {
                item.auditTime = getNowFormatDate(item.auditTime)

              }
              if (item.updateTime) {
                item.updateTime = getNowFormatDate(item.updateTime)
              }
            })
            this.orderList = res.data.data.records

            // console.log(this.orderList)
          }
        })
      },

      //删除一条订单
      handleDelete(row) {
        this.id = row.orderId
        this.delVisible = true
        this.delOrderArr=[]
        this.delOrderArr.push(row)
      },
      deleteRow() {
        delOrder(this.id)
          .then(res => {
            if (res.data.code == 0) {
              this.delVisible = false;
              this.updateData()
              this.notify("删除成功", "success");
            } else {
              this.notify("删除失败", "error");
            }
          })
          .catch(err => {
            console.log(err);
          });

      },
      //查看订单详情
      orderDetail(row) {
        if (row.status == 1) {
          this.id = row.orderId
          // this.detailVisible=true
          this.$router.push({
            path: "/orderStage",
            query: {
              id: this.id
            }
          });
        } else {
          this.notify("请确认订单状态", "error");
        }

      },

      //获取状态
      getAuditDate(row) {
        this.id = row.orderId
        this.update_orderList = []
        this.update_orderList.push(row)
        this.centerDialogVisible = true
        this.registerForm.userAccount = row.userAccount
        this.registerForm.term = row.term
        this.registerForm.amount = row.amount
        this.registerForm.parentOperate = row.parentOperate
        this.registerForm.status = row.status
      },
      //确认修改状态
      updateAudit() {
        let data = {
          "id": this.id,
          "status": parseInt(this.registerForm.status),
          "amount": this.registerForm.amount

        }
        updateAuditById(data).then(res => {
          if (res.data.code == 0) {
            this.centerDialogVisible = false;
            this.updateData()
            this.notify("修改成功", "success");
          } else {
            this.notify("修改失败", "error");
          }
        })
      },
      //取消
      goBack(i) {
        if (i == 1) {
          this.registerForm = {
            "userAccount": "",
            "term": 0,
            "amount": 0,

            "parentOperate": "",
            "status": 0
          }

        } else {
          this.updateData();
        }
        this.centerDialogVisible = false
      }
    }
  }
</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }

  .grid-content {
    display: flex;
    align-items: center;
    height: 50px;
  }

  .grid-cont-center {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: darkgray;
  }

  .grid-num {
    font-size: 30px;
    font-weight: bold;
    color: #ff625b;
  }
  .grid-num+div{
    color: black;
    font-weight: 600;
    font-size: 16px;
  }

  .template_btn {
    margin-bottom: 10px !important;
    margin-left: 0 !important;
  }
</style>
